<template>
  <el-container class="phrq">
    <el-aside class="orderAside" width="150px">
      <div class="defaultOrder" @click="toOrderAll">人气榜单</div>
      <el-divider></el-divider>
      <ul>
        <li class="startOrder">热门作品排行</li>
        <li @click="toOrderItem('打赏榜')">打赏榜</li>
        <li @click="toOrderItem('畅销榜')">畅销榜</li>
        <li @click="toOrderItem('阅读指数榜')">阅读指数榜</li>
        <!-- <li @click="toOrderItem('粉丝榜')">粉丝榜</li> -->
        <!-- <li @click="toOrderItem()">推荐榜</li> -->
        <li @click="toOrderItem('收藏榜')">收藏榜</li>
        <!-- <li @click="toOrderItem()">更新榜</li> -->
        <!-- <li @click="toOrderItem()">VIP收藏榜</li> -->

        <li @click="toOrderItem()"><el-divider></el-divider></li>
      </ul>
      <ul>
        <li class="startOrder">新书排行</li>
        <li @click="toOrderItem('签约作者新书榜')">签约作者新书榜</li>
        <li @click="toOrderItem('公众作者新书榜')">公众作者新书榜</li>
        <li @click="toOrderItem('新人签约新书榜')">新人签约新书榜</li>
        <li @click="toOrderItem('新人作者新书榜')">新人作者新书榜</li>
        <li><el-divider></el-divider></li>
      </ul>
    </el-aside>
    <el-main>
      <div class="titleh" style="margin-left: 20px">人气榜单</div>
      <div class="catarq">
        <ul class="catalogAll" style="margin-left: 20px">
          <li
            :class="clCatalog == '全部分类' ? catalogItemClass : ''"
            @click="clCa('全部分类')"
          >
            全部分类
          </li>
          <li
            v-for="ca of catalog"
            :class="clCatalog == ca ? catalogItemClass : ''"
            :key="ca"
            @click="clCa(ca)"
          >
            {{ ca }}
          </li>
        </ul>
      </div>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { catalogOne } from "@/api";
export default {
  data() {
    return {
      catalogItemClass: ["clItem"],
      catalog: [],
      //选中得分类
      clCatalog: "全部分类",
      type: this.$route.query.type,
    };
  },
  methods: {
    clCa(ca) {
      console.log(this.$route.path, "-----------");
      if (ca != this.clCatalog) {
        this.clCatalog = ca;
        if ("/order/allSort" == this.$route.path) {
          console.log(this.$route.path, "------allSort-----");
          this.toOrderAll();
        } else if ("/order/sortPage" == this.$route.path) {
          console.log(this.$route.path, "-----sortPage------");
          this.toOrderItem();
        }
      }
    },
    toOrderAll() {
      this.$router.push({
        name: "allSort",
        query: {
          catalog: this.clCatalog,
        },
      });
    },
    toOrderItem(type) {
      if (type && this.type != type) {
        this.type = type;
        this.$router.push({
          name: "sortPage",
          query: {
            catalog: this.clCatalog,
            type: this.type,
          },
        });
      } else if (!type) {
        this.$router.push({
          name: "sortPage",
          query: {
            catalog: this.clCatalog,
            type: this.type,
          },
        });
      }
    },
  },
  created() {
    catalogOne()
      .then(({ data }) => {
        this.catalog = data.data;
      })
      .catch((err) => {});
    this.clCatalog = this.$route.query.catalog;
    if (!this.clCatalog) {
      this.clCatalog = "全部分类";
    }
    console.log(this.clCatalog, "--------------选中的catalog");
  },
};
</script>

<style scoped>
.phrq {
  width: 80%;
  margin: auto;
}
.orderAside {
  padding-top: 20px;
}
.orderAside li:nth-child(n + 2) {
  font: 14px/1 PingFangSC-Regular, -apple-system, Simsun;
  margin-bottom: 20px;
}
.startOrder {
  font-size: 14px;
  font-weight: bolder;
  margin-bottom: 20px;
}
.defaultOrder {
  font: 14px/1 PingFangSC-Regular, -apple-system, Simsun;
  margin-bottom: 20px;
  color: #ed4259;
  font-weight: 700;
  transition: color 0.3s, background-color 0.3s;
}
/* -------------------- */
.titleh {
  font-size: 26px;
  line-height: 26px;
  margin-bottom: 15px;
  font-weight: 400;
}
.catarq {
  margin: 20px 0;
}
.catalogAll {
  background: #f7f6f2;
}
.catalogAll li {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 700;
  font: 12px/40px PingFangSC-Regular, -apple-system, Simsun;
}
.clItem {
  color: #ed4259;
}
.catalogAll::after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.catalogAll {
  *zoom: 1;
}
</style>